<template>
  <div>
    <h1>天气预报</h1>
    <input type="text" v-model="city" />
    <button @click="handleClick">查询</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.fxDate }}
        气温：{{ item.tempMin }}~{{ item.tempMax }}℃ 
        天气：{{ item.textDay }}
        <!-- 找不到 -->
        <!-- <img :src="'@/assets/icon/weather-icon-S2/256/'+item.iconDay+'.png'" alt="" width="30px" /> -->

        <!-- :src=''单引号没有问题，双引号不行需要转一下 -->
        <!-- :src="require(地址)"双引号，需要转一下 -->
        
        <!-- <img :src='"@/assets/icon/weather-icon-S2/256/"+item.iconDay+".png"' alt="" width="30px" /> -->
        <!-- <img :src="require('@/assets/icon/weather-icon-S2/256/'+item.iconDay+'.png')" alt="" width="30px" /> -->
        
        <!-- 使用图标 -->
        <i :class="'qi-'+item.iconDay"></i>
        风速：{{item.windSpeedDay}}km/h
      </li>
    </ul>
  </div>
</template>
<script>
// 方法1 js中引入---局部的只在当前组件中生效
import "@/assets/css/font/qweather-icons.css"
export default {
  data() {
    return {
      city: "青岛",
      list: [],
    };
  },
  methods: {
    // 属性:function(){},
    // 属性(){},
    async handleClick() {
      // this.handleAjax(`https://geoapi.qweather.com/v2/city/lookup?location=${this.city}&key=a6a37f0f14c84f9fadbba9b81f19b0e8`).then((res)=>{
      //     console.log(res,"id")
      // })

      // 查询城市id
      let dataId = await this.handleAjax(
        `https://geoapi.qweather.com/v2/city/lookup?location=${this.city}&key=a6a37f0f14c84f9fadbba9b81f19b0e8`
      );

      // 查询城市天气
      let dataWeather = await this.handleAjax(
        `https://devapi.qweather.com/v7/weather/7d?location=${dataId.location[0].id}&key=a6a37f0f14c84f9fadbba9b81f19b0e8`
      );
      console.log(dataWeather.daily, "天气");
      // 将请求来的数据赋值给data中的list变量
      this.list = dataWeather.daily;
    },
    // 封装ajax
    handleAjax(url) {
      return new Promise((resolve, reject) => {
        fetch(url)
          // 将请求的数据转为json对象
          .then((res) => res.json())
          // 转换成功
          .then((res) => {
            // 调用回调函数传递参数
            resolve(res);
          });
      });
    },
  },
  mounted(){
    this.handleClick()
  }
};
</script>
<style scoped>
/* 方法2 css中引入，加上scoped之后只在当前组件中生效，否则就是全局使用的 */
/* @import url("@/assets/css/font/qweather-icons.css"); */
</style>
<!-- 杜绝在组件中使用全局，要想使用全局必须在main.js中，因为好管理。
用的少用局部，用的次数多用全局，放到main.js中
-->